<template>
     <div class="cityListview">
            <b-scroll @bsloaded="bsloaded">
            <div class="cityList" v-for="(item,index) in formatCityList" :key="index">
                <div class="pyName" :id="item.name">{{item.name.toUpperCase()}}</div>
                <div @click="chooseCity(cityItem)" class="cityItem" v-for="(cityItem) in item.list" :key="cityItem.py">{{cityItem.nm}}</div>
            </div>
            </b-scroll>
            <div class="rightBar">
                <div @click="scrollToCity(item.name)" v-for="(item,index) in formatCityList" :key="index">
                    {{item.name.toUpperCase()}}
                </div>
            </div>
        </div>
</template>

<script>
import formatCityList from "../config/formatCityList.js"
import BScroll from "../components/BScroll"
export default {
    name:"cityListView",
    data(){
        return {
            isShowCtiyListView:false,
            formatCityList:formatCityList,
            scroll:null
        }
    },
    methods:{
        bsloaded(scroll){
            this.scroll=scroll
        },
        scrollToCity(cityId){
            // cityId应该就是元素的ID
            this.scroll.scrollToElement(document.getElementById(cityId))
        },
        chooseCity(cityItem){
            this.$emit('getCity',cityItem)
        }
    },
    components:{
        BScroll,
    }
}
</script>

<style lang="scss" scoped>
 @import "../assets/css/comm.scss";
    .cityListview{
        position: fixed;
        width: 100vw;
        height: 100vh;
        top: 0px;
        left: 0px;
        background-color: white;
        .cityList{
            .pyName{
                background-color: #f1eaea;
                @include flexbox();
                height: .6rem;
                align-items: center;
                box-sizing: border-box;
                padding-left: .4rem;
            }
            .cityItem{
                box-sizing: border-box;
                padding: 0 .4rem;
                height: 0.9rem;
                @include flexbox();
                align-items: center;
                border-bottom: 1px solid #999999;
                font-size: .28rem;
            }
        }
        .rightBar{
            position: fixed;
            right: .1rem;
            top: 1.4rem;
            bottom: 1.4rem;
            width: .4rem;
            background-color: rgba(0,0,0,.2);
            border-radius: .2rem;
            @include flexbox(column);
            align-items: center;
            justify-content: space-around;
            >div{
                font-size: .24rem;  
            }
        }
    }
</style>
